<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/jquery-1.11.3.min.js"></script>
    <script src="../layui/layui.js"></script>
<!--  初始化加载窗体  -->
    <script>
        layui.use(['layer','form','element'],function () {
            var layer = layui.layer,form = layui.form,element=layui.element;
            var tab = $("#tab");
            var xinz = $("#xinz");
            var xinz1 = "";
            xinz1 += "<input type='button' value='新增员工' class='layui-btn' onclick='xinz()' />";
            xinz.html(xinz1);
            var c = "";
            c += "<thead><tr align='center'>" +
                    "<td>Id</td>"+
                    "<td>姓名</td>"+
                    "<td>所属部</td>"+
                    "<td>操作</td>"+
                "</tr></thead>";
            tab.html(c);//替换
            $.ajax({
                url:'../emp/findAll',
                type:'POST',
                data:{},
                success:function (emp) {
                    var c1 = "";
                    $(emp).each(function (i,e) {
                        console.log(e.ename);
                        c1 += "<tr align='center'>" +
                            "<td>"+e.eid+"</td>"+
                            "<td>"+e.ename+"</td>"+
                            "<td>"+e.dept.dname+"</td>"+
                            "<td>" +
                                "<button class='layui-btn layui-btn-sm' onclick='findById("+e.eid+")'>修改</button>"+
                                "&emsp;"+
                                "<button class='layui-btn layui-btn-sm layui-btn-warm' onclick='delete_emp("+e.eid+")' >删除</button>"+
                            "</td>"+
                            "</tr>";
                    })
                    tab.append(c1);//续加
                },
                error:function (e) {
                    layer.alert('接口异常！',{icon:0})
                }
            });
        })
    </script>
<!--  通过id查询单独信息并修改  -->
    <script>
        function findById(eid) {
            if (eid != "" &eid != null) {
                $.ajax({
                    url:'../emp/findById',
                    type:'POST',
                    data:{eid:eid},
                    success:function (emp) {
                        var c1html = "";
                            console.log(emp.ename);
                        c1html += "<form id='form' class='layui-form' style='width: 460px;margin-top: 30px'>" +
                            "<div class='layui-form-item'>" +
                                "<label class='layui-form-label'>Id</label>"+
                                "<div class='layui-input-block'>" +
                                    "<input type='text' name='eid' id='eid' value='"+emp.eid+"' lay-verify='title' autocomplete='off' class='layui-input' readonly='readonly' />"+
                                "</div>"+
                            "</div>"+
                            "<div class='layui-form-item'>" +
                                "<label class='layui-form-label'>姓名</label>"+
                                "<div class='layui-input-block'>" +
                                    "<input type='text' name='ename' id='ename' value='"+emp.ename+"' lay-verify='title'  autocomplete='off' class='layui-input' required='required' />"+
                                "</div>"+
                            "</div>"+
                            "<div class=\"layui-form-item\">" +
                                "<label class=\"layui-form-label\">所属部</label>"+
                                "<div class='layui-input-block'>" +
                                    "<input type='text' name='did' id='did' value='"+emp.dept.dname+"' lay-verify='title'   autocomplete='off' class='layui-input' required='required' />"+
                                "</div>"+
                            "</div>"+
                            "<div class='layui-form-item'>" +
                                "<div class='layui-input-block'>" +
                                    "<button type='button' onclick='update_emp()' class='layui-btn layui-btn-sm'>修改</button>"+
                                    "&emsp;"+
                                    "<button type='reset' class='layui-btn layui-btn-sm layui-btn-warm'>重置</button>"+
                                "</div>"+
                            "</div>"+
                            "</form>";
                        layer.open({
                            type:1,
                            title:'修改员工信息',
                            area:['500px','420px'],
                            skin:'layui-layer-lan',
                            content:c1html,
                        })
                    },
                    error:function (e) {
                        layer.msg('接口异常！',{icon:0,time:2000})
                    }
                });
            } else {
                layer.msg('id获取异常！',{
                    icon: 5
                    ,time:2000
                })
            }
        }
        //修改
        function update_emp() {
            var form = new FormData(document.getElementById("form"));
            $.ajax({
                url:'../emp/update_emp',
                type:'POST',
                contentType:false, //必须false才能避开Jaquery对formData的默认处理
                processData:false, //必须false才能自动加上正确的Content-type
                data:form,
                success:function (i) {
                    if (i == 1) {
                        layer.msg('修改成功',{icon:6,time:1500})
                    }else {
                        layer.msg('修改失败',{icon:5,time:1500})
                    }
                    setTimeout(function () {
                        window.location.reload();//刷新
                    },1600);//延迟
                },
                error:function (e) {
                    layer.alert('接口异常',{icon:0})
                }
            });
        }
    </script>
<!-- 新增   -->
    <script>
<!--  编写内容   -->
        function xinz() {
            var header = $("#header");
            var tab = $("#tab");
            var xinz = $("#xinz");
            header.html("新增账户");
            xinz.hide();//隐藏
            var ta = "";
            ta += "<tr align='center'>" +
                "<td >姓名：</td>"+
                "<td>" +
                "<input type='text' placeholder='请输入姓名' id='ename' name='ename' class='layui-input' style='width: 200px' maxlength='12' >"+
                "</td>"+
                "</tr>"+
                "<tr align='center'>" +
                "<td>所属部门：</td>"+
                "<td>" +
                "<select name='did' id='did' class='layui-input' style='width: 200px' lay-skin='layui-layer-molv'>" +
                "<option value=''>请选择</option>"+
                "</select>"+
                "</td>"+
                "</tr>"+
                "<tr align='center'>" +
                "<td colspan='2px' align='center'>" +
                "<input type='button' value='新增' class='layui-btn' onclick='Save()' >"+
                "&nbsp;"+
                "<input type='button' value='返回' class='layui-btn layui-btn-warm' onclick='window.location.reload()' >"+
                "</td>"+
                "</tr>";
            tab.html(ta);
            $.ajax({
                url:'../dept/findAll',
                type:'POST',
                data:{},
                success:function (dept) {
                    var did = $("#did");
                    $(dept).each(function (i,d) { //将查询到的部门封装到did下拉框中
                        console.log(d.dname);
                        did.append("<option value='"+d.did+"'>"+d.dname+"</option>");
                    });
                },
                error:function (d) {

                }
            });

        }
        function Save() {
            var ename = $("#ename");
            var did = $("#did");
            $.ajax({
                url:'../emp/save',
                type:'POST',
                data:{ename:ename.val(),did:did.val()},
                success:function (data) {
                    if (data == 1) {
                        layer.msg('新增成功',{icon:1,time:1500});
                        setTimeout(function () {
                            window.location.reload();//刷新
                        },1600);//延迟
                    }else {
                        layer.msg('新增失败',{icon:0,time:1500});
                        setTimeout(function () {
                            window.location.reload();//刷新
                        },1600);//延迟
                    }
                },
                error:function (e) {
                    layer.msg("接口异常！")
                }
            });
        }
    </script>
<!-- 删除   -->
    <script>
        function delete_emp(eid) {
            layer.confirm('确定删除ID为'+eid+'的员工',
                {   icon:2, skin:'layui-layer-molv',
                    btn:['确定','返回']
                },function () {
                $.ajax({
                    url:'../emp/delete_emp',
                    type:'POST',
                    data:{eid:eid},
                    success:function (data) {
                        if (data == 1) {
                            layer.msg('删除成功',{icon:1,time:1500});
                            setTimeout(function () {
                                window.location.reload();//刷新
                            },1600);//延迟

                        }else {
                            layer.msg('删除失败',{icon:0,time:1500});
                            setTimeout(function () {
                                window.location.reload();//刷新
                            },1600);//延迟
                        }
                    },
                    error:function (e) {
                        layer.msg("接口异常！")
                    }
                });
            },function () {
                window.history.go();//后退
            });
        }
    </script>
</head>
<body>
    <center>
        <h1 id="header">员工表</h1>
        <table class="layui-table" lay-skin="line" id="tab">

        </table>
        <p id="xinz"></p>
    </center>
</body>
</html>